<template>
	<view>
		<input :maxlength="props.maxLength?props.maxLength:Infinity"  :value="content" @input="changeHd"   />
		<view v-if="props.maxLength">
		{{content.length}}/{{props.maxLength}}
		
		</view>
		<text v-if="content.length" @click="clear" >x</text>
	</view>
</template>

<script setup>
	import {ref,nextTick,defineEmits,defineExpose} from 'vue'
	const emits = defineEmits(["update:modelValue","clear","update"])
	 const props = defineProps({
		 // 长度
		 "maxLength":{
			 type:[Number,String],
			 default:"",
			 required: false
		 },
		 // 默认值
		 "modelValue":{
			 type:String,
			 default:"",
			 required: false
		 },
		 "value":{
			 type:String,
			 default:""
		 }
	 })
	 // 内容
	 var defaults = props.modelValue||props.value;
	 if(props.maxLength){
		 defaults = defaults.slice(0,props.maxLength);
	 }
	 // 默认值
	 const content = ref(defaults)
	 // 当表单发生变化时候
	 const changeHd = e=>{
		 // 获取表单截取的值
		 var str = e.detail.value.slice(0,props.maxLength)
		 // 更新第一次表单
		 content.value = e.detail.value;
		 emits("update:modelValue",content.value)
		 emits("update",content.value)
		 if(props.maxLength){
			 nextTick(()=>{
				// 第一次更新完更新第二次
				// content.value=str;
			})
		 }
			 
		
	 }
	 function clear(){
		 content.value = "";
		 emits("update:modelValue",content.value)
		 emits("clear",content.value)
	 }
	 // 暴露一个clear方法让父组件可以通过ref调用
	 defineExpose({
		 clear
	 })
 
</script>

<style lang="scss">

</style>